<template>
    <view class="l-grid l-class" mut-bind:tap="tapGrid">
        <view
            mut-bind:tap="tapGridItem"
            :hover-class="isHover ? 'l-gird-hover' : ''"
            hover-start-time="20"
            hover-stay-time="50"
            :data-grid-index="item.index"
            :class="
                'l-grid-item l-class-grid l-grid-class ' +
                (index % rowNum !== rowNum - 1 && (showBorder || showColBorder) ? 'side-grid' : '') +
                ' ' +
                (index < gridItems.length - (gridItems.length % rowNum || rowNum) && (showBorder || showRowBorder) ? 'center-grid' : '')
            "
            :style="'min-width:' + 100 / rowNum + '%;'"
            v-for="(item, index) in gridItems"
            :key="index"
        >
            <slot :name="item.key"></slot>
        </view>
    </view>
</template>

<script>
import lGridItem from '../grid-item/index';
import hover from '../behaviors/hover';
export default {
    unicomGroup: ['grid-item'],
    data() {
        return {
            gridItems: [],
            childNum: 0,
            currentIndex: -1,
            currentCell: -1,
            isHover: false
        };
    },
    options: {
        multipleSlots: true
    },
    mixins: [hover],
    relations: {
        '../grid-item/index': {
            type: 'child',
            linked() {
                this.initGrids();
            },
            unlinked() {
                this.initGrids();
            }
        }
    },
    externalClasses: ['l-class', 'l-class-grid', 'l-grid-class'],
    props: {
        rowNum: {
            type: String,
            default: 3
        },
        showBorder: Boolean,
        showColBorder: Boolean,
        showRowBorder: Boolean
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    show() {},
    methods: {
        ready() {
            this.initGrids();
        },

        initGrids() {
            let e = this.getRelationNodes('grid-item');
            if (this.childNum === e.length) {
                return;
            }
            const t = e.map(
                (e, t) => (
                    e.setData({
                        index: t
                    }),
                    {
                        index: t,
                        key: e.data.key,
                        cell: e.data.cell
                    }
                )
            );
            this.setData({
                gridItems: t,
                childNum: e.length
            });
        },

        tapGridItem(e) {
            const { gridIndex: t } = e.target.dataset;
            this.setData({
                currentIndex: t,
                currentCell: this.gridItems[t].cell
            });
        },

        tapGrid() {
            this.$emit(
                'lintap',
                {
                    detail: {
                        index: this.currentIndex,
                        cell: this.currentCell
                    }
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
            this.setData({
                currentIndex: -1,
                currentCell: -1
            });
        }
    },
    created: function () {}
};
</script>
<style>
.l-grid {
    display: flex;
    width: inherit;
    flex-wrap: wrap;
}
.l-grid .l-grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;
    border-style: solid;
    border-color: #ededed;
    border-width: 0;
}
.l-grid .center-grid {
    border-bottom-width: 2rpx;
}
.l-grid .side-grid {
    border-right-width: 2rpx;
}
.l-gird-hover {
    opacity: 0.8;
}
</style>
